<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="/css/font.css">
    <link rel="stylesheet" href="/css/xadmin.css">
    <script type="text/javascript" src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
    <script src="/lib/layui/layui.js" charset="utf-8"></script>
    <script type="text/javascript" src="/js/xadmin.js"></script>
</head>
<body>

<form action="/test/excel">
    <button class="layui-btn" onclick="x_admin_show('添加用户','/test/add')" type="button"><i class="layui-icon"></i>添加</button>
<!--这里的button按钮type属性submit表示默认的返回表单上的路径，上面的按钮返回的不是表单的路径-->
    <button class="layui-btn"  type="submit"><i class="layui-icon"></i>excel导出</button>
</form>
<table class="layui-table">
    <thead>
    <th>ID</th>
    <th>登录名</th>
    <th>手机</th>
    <th>邮箱</th>
    <th>角色</th>
    <th>状态</th>
    <th>操作</th>
    </thead>
    <tbody>
<!--    这里的list和userList分别是在控制层和服务器层传的值-->
    <tr th:each="x:${list.userList}">
        <td th:text="${x.uId}"></td>
        <td th:text="${x.userName}"></td>
        <td th:text="${x.userDetail.phone}"></td>
        <td th:text="${x.userDetail.email}"></td>
        <td>
            <ul th:each="y:${x.roleInfoList}">
                <li th:text="${y.rName}" style="float: left;margin: 5px"> </li>
            </ul>
        </td>
<!--        <td >管理员</td>-->
<!--        <td th:text="${x.userDetail.state}"></td>-->

        <td class="td-status" th:if="${x.userDetail.state==1}">
            <span class="layui-btn layui-btn-normal layui-btn-mini">启用</span>
        </td>
        <td class="td-status" th:if="${x.userDetail.state==0}">
            <span class="layui-btn layui-btn-normal layui-btn-mini layui-btn-disabled">停用</span>
        </td>
        <td class="td-manage" th:if="${x.userDetail.state==1}">
            <a onclick="member_stop(this)" href="javascript:;"  title="启用">
                 <!--这里是将改变箭头的方向，当你启用和禁用时箭头对应的状态-->
                <i class="layui-icon">&#xe62f;</i>
            </a>
            <a title="编辑"  onclick="update(this)" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
            </a>
            <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
            </a>
        </td>
        <td class="td-manage" th:if="${x.userDetail.state==0}">
            <!--通过这个this进去动态的拿值，title这里是将鼠标指在按钮上面显示的文本-->
            <a onclick="member_stop(this)" href="javascript:;"  title="停用">
                <i class="layui-icon">&#xe601;</i>
            </a>
            <a title="编辑"  onclick="update(this)" href="javascript:;">
                <i class="layui-icon">&#xe642;</i>
            </a>
            <a title="删除" onclick="member_del(this,'要删除的id')" href="javascript:;">
                <i class="layui-icon">&#xe640;</i>
            </a>
        </td>
    </tr>
    </tbody>
</table>
<div class="page">
    <div>
        <a class="prev" th:href="@{/test/list(page=${list.prePage})}">&lt;&lt;</a>
        <a class="num" href="/test/list">首页</a>
        <span class="current" th:text="${list.curPage}"></span>
        <a class="num" th:href="@{/test/list(page=${list.totalPage})}">尾页</a>
        <a class="next" th:href="@{/test/list(page=${list.nextPage})}">&gt;&gt;</a>
    </div>
</div>

</body>
</html>
<script>
    function member_stop(obj) {
        //这里的td就是从几个字段按照顺序数的结果，从第一个为0开始，这里的tel对应的是第二个
        var tel = $(obj).parents("tr").find("td").eq(2).text()
        layer.alert(tel)
//更改按钮的样式
        if ($(obj).attr("title")=="停用"){
            //更该属性title值
            $(obj).attr("title","启用")
            $(obj).parents("tr").find("td").eq(5).find("span").removeClass("layui-btn-disabled").text("启用")
            //更改图标
           $(obj).find("i").html("&#xe62f;")
        }else {
            $(obj).attr("title","停用")
            //更改启用和停用两种按钮的状态的代码addClass和removeClass
            $(obj).parents("tr").find("td").eq(5).find("span").addClass("layui-btn-disabled").text("停用")
            //更改图标
            $(obj).find("i").html("&#xe601;")
        }
    }
</script>

<!--级联修改的代码-->
<script>
    /*用户-编辑*/
    function update(obj) {
        //获取要编辑用户的编号uId
        var uId=$(obj).parents("tr").find("td").eq(2).text();
        //访问修改页面地址，把编号uId传过去
        var url ='/userInfo/update?uId='+uId
        x_admin_show('用户修改',url)
    }
</script>